import React, {useState} from 'react';
import MDEditor from '@uiw/react-md-editor';
import {Alert, Button, Input, message, Modal, Radio, Select, Upload} from "antd";
import {UploadOutlined} from "@ant-design/icons";
import TextArea from "antd/es/input/TextArea";
import {uploadFile} from "../../../util/api/UploadApi";

const ArticleWrite = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 标题
  const [title, setTitle] = useState("");
  // 内容
  const [content, setContent] = useState("");
  // 摘要
  const [summary, setSummary] = useState("");
  // 分类
  const [category, setCategory] = useState("");
  // 封面
  const [cover, setCover] = useState("");
  // 发布状态
  const [status, setStatus] = useState(0);
  // 允许评论
  const [comment, setComment] = useState(0);

  const titleChange = (e) => {
    setTitle(e.target.value)
  }

  const summaryChange = (e) => {
    setSummary(e.target.value)
  }

  const categoryChange = (value) => {
    setCategory(value)
  }

  const commentChange = (e) => {
    setComment(e.target.value)
  }

  const beforeUpload = (file) => {
    const allowFormat = file.type === "image/jpeg" || file.type === "image/png";
    if (!allowFormat) {
      message.warning("文件格式错误");
      return Promise.reject("文件格式错误")
    }
    const fileSize = file.size / 1024 / 1024 < 2;
    if (!fileSize) {
      message.warning("图片应小于2MB");
      return Promise.reject("图片应小于2MB")
    }
    return Promise.resolve("ok");
  }
  // 自定义上传
  const customRequest = (option) => {
    const formData = new FormData();
    formData.append("file", option.file)
    uploadFile(formData).then(res => {
      console.log(res);
      return Promise.resolve(res);
    }, err => {
      console.log(err);
      return Promise.reject(err);
    })
  }
  // 状态改变时调用
  const handleChange = (info) => {
    console.log(info);
    if (info.file.status === "done") {
      message.success("上传成功").then(r => {
        console.log(r)
      });
      return Promise.resolve("上传成功");
    }
    if (info.file.status === "error") {
      message.error("上传失败").then(r => {
        console.log(r)
      });
      return Promise.reject("上传失败");
    }
  }


  // 打开关闭消息框
  const modalOpen = () => {
    setIsModalOpen(true);
  }
  const modalClose = () => {
    setIsModalOpen(false);
  }
  // 发布
  const publish = () => {
    modalClose();
    setStatus(1);
    console.log({
      "title": title,
      "content": content,
      "summary": summary,
      "category": category,
      "cover": cover,
      "status": status,
      "comment": comment
    })
  }

  // 保存草稿
  const saveDraft = () => {
    modalClose();
    setStatus(0);
    console.log({
      "title": title,
      "content": content,
      "summary": summary,
      "category": category,
      "cover": cover,
      "status": status,
      "comment": comment
    })
  }
  return (
    <div>
      <Input
        size={"large"}
        placeholder={"请输入文章标题"}
        showCount
        maxLength={100}
        value={title}
        onChange={titleChange}
        style={{
          width: "1000px",
          marginLeft: "20px",
          marginBottom: "10px",
          borderRadius: "5px"
        }}
      />
      <Button
        size={"large"}
        style={{
          marginLeft: "20px",
          borderRadius: "5px"
        }}
      >
        保存草稿
      </Button>
      <Button
        type={"primary"}
        size={"large"}
        style={{
          marginLeft: "20px",
          borderRadius: "5px"
        }}
        onClick={modalOpen}
      >
        发布文章
      </Button>
      <Modal
        open={isModalOpen}
        footer={null}
        closable={true}
        onCancel={modalClose}
      >
        <Alert
          message="请勿发布广告、营销、违反国家法律法规等内容"
          type="warning"
          showIcon style={{
          height: "30px",
          marginTop: "20px"
        }}/>
        <div style={{
          margin: "10px 0",
          fontSize: "14px"
        }}>
          <span>封面：</span>
          <Upload
            accept={".jpg, .png"}
            maxCount={1}
            showUploadList={false}
            beforeUpload={beforeUpload}
            onChange={handleChange}
            customRequest={customRequest}
          >
            <Button icon={<UploadOutlined/>}>点击上传图片</Button>
          </Upload>
        </div>
        <div
          style={{
            margin: "10px 0"
          }}
        >
          <span>摘要：</span>
          <TextArea
            rows={4}
            showCount={true}
            value={summary}
            onChange={summaryChange}
            style={{
              width: "400px",
              marginLeft: "40px"
            }}
          />
        </div>
        <div
          style={{
            margin: "10px 0"
          }}
        >
          <span>文章分类：</span>
          <Select
            size={"small"}
            defaultValue="java"
            value={category}
            onChange={categoryChange}
            style={{
              width: "100px"
            }}>
            <Select.Option value="java">java</Select.Option>
            <Select.Option value="python">python</Select.Option>
            <Select.Option value="c">c</Select.Option>
            <Select.Option value="大数据">大数据</Select.Option>
            <Select.Option value="前端">前端</Select.Option>
            <Select.Option value="后端">前端</Select.Option>
          </Select>
        </div>
        <div
          style={{
            margin: "10px 0"
          }}
        >
          <span>是否允许评论：</span>
          <Radio.Group
            value={comment}
            onChange={commentChange}
          >
            <Radio value={1}>是</Radio>
            <Radio value={0}>否</Radio>
          </Radio.Group>
        </div>
        <div
          style={{
            height: "30px",
            marginTop: "40px"
          }}
        >
          <Button
            onClick={modalClose}
            style={{
              float: "right",
              marginLeft: "20px"
            }}>
            取消
          </Button>
          <Button
            style={{
              float: "right",
              marginLeft: "20px"
            }}
            onClick={saveDraft}>
            保存为草稿
          </Button>
          <Button
            type={"primary"}
            style={{
              float: "right",
              marginLeft: "20px"
            }}
            onClick={publish}
          >
            发布文章
          </Button>
        </div>
      </Modal>
      <MDEditor
        value={content}
        onChange={setContent}
        height={"500px"}
      />
    </div>
  );
};

export default ArticleWrite;